<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>蜜读</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/aui.css" />
    <link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->

    <script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
    </script>
    <style>
        #footer {
            background-color: #f2f2f2;
        }

        #footer ul li {
            background: url() no-repeat center 5px;
            text-align: center;
            color: #666666;
        }

        #footer ul li.active {
            color: #282828;
        }


        #footer ul li:nth-child(2) {
            background-image: url(icon/me.png);
        }

        #footer ul li:nth-child(1).active {
            background-image: url(icon/home_hover.png);
        }


        .swiper-container {
            width: 100%;
            height: 12rem;
            /*top: 12rem;*/
        }

        #tabbar {
            text-align: center;
            padding: 1.56rem 0 0 0;
            margin-left: 1.04rem;
            height: auto
        }

        #tabs div.active:after{
            width: 2.0rem;
            border-radius: 1rem;
        }

        #tabs div:after{
            content: "";
            position: absolute;
            display: block;
            width: 0;
            height: .3rem;
            background-color: #282828;
            bottom: 0;
            left: 50%;
            transition: all .4s;
            transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
        }

        .tab {
            align: center;
            height: 3.5rem;
            line-height: 3rem;
            font-weight: 500;
            color: #282828;
        }

        .command {
            font-size: 1.4rem;
            font-weight: bold;
            color: #333333;
            margin-left: 1.5rem;
            margin-right: 2rem;
            box-sizing: border-box;
            position: relative;
        }

        .aui-ellipsis-3 {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal !important;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .command:after {
            content: "";
            position: absolute;
            display: block;
            width: 0;
            height: .25rem;
            background-color: #282828;
            bottom: 0;
            left: 50%;
            transition: all .4s;
            transform: translate(-50%, 0);
            -webkit-transform: translate(-50%, 0);
        }

        .command.active:after {
            width: 2.6rem;
        }

        .follow-mask {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(38,38,38,0.66);
            z-index: 100;
        }

        .activity-alertView .activity_bookView{
            position: fixed;
            padding-top: 2rem;
            padding-left: 2rem;
            background-color: white;
            border-radius: 0.78rem;
            top: 5.2rem;
            height: auto;
            left: 3.12rem;
            right: 3.12rem;
            z-index: 120;
        }

        .newUser_activity .newUser_activity_bookView {
            position: fixed;
            padding-top: 2rem;
            background-color: white;
            border-radius: 0.78rem;
            top: 10rem;
            height: 38rem;
            left: 4rem;
            right: 4rem;
            z-index: 120;
            overflow: hidden;
        }

        .activity-list ul {
            overflow: hidden;
        }

        .activity-list ul li {
            float: left;
            height: 14rem;
            width: 7.9rem;
            margin: 1.82rem 1.3rem 0 .52rem;
            position: relative;
        }

        #warn{
            background: rgba(0, 0, 0, 0.7);
            text-align: center;
            border-radius: 0.26rem;
            color: white;
            position: fixed;
            z-index: 3000;
            top: 45%;
            left: 25%;
            width: 50%;
            height: 4.16rem;
            line-height: 0.1rem;
            display: none;
            padding-top: 2.08rem;
        }

        .top-tag-container {
            padding: 15.5rem 1.2rem 1.56rem 1.2rem;
        }

        .top-tag-container ul {
            overflow: hidden;
        }

        .top-tag-container ul li {
            float: left;
            height: 3.6rem;
            width: 6.5rem;
            margin: 1.1rem 1.1rem 0 1.1rem;
            position: relative;
        }
        #presenter_box{
            margin-top: 17rem;
            position: relative;
        }

        .recommend_btn{
            height: 4rem;
            text-align: center;
            margin-bottom: .8rem;
            margin-top:2rem;
        }

        .presenter{
            margin: 0 auto;
            width: 13rem;
            height: 16rem;
            position: relative;
        }
        .presenter_img{
            width: 13rem;
            height: 16.9rem;
            margin: .8rem auto 0rem;
            border-radius: 4px;
            box-shadow: 0 0 8px 0.52rem #eff0f5;

        }
        .presenter_icon{
            width: 4.5rem;
            height: 4.4rem;
            position: absolute;
            right: -1.5rem;
            top: -1.5rem;
        }
        .recommend_btn p{
            display: inline-block;
            height: 3rem;
            padding: 0  1.2rem !important;
            border-radius: 10rem;
            line-height: 3rem;
            font-size: 1.5rem;
            font-weight: 500;

            margin: 1rem 0;
        }
        .bookrecommend{
            height: 5rem;
            font-size: 1.5rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        .recommend_btn p:nth-child(1){
            background: #ffda43;
            margin-right: 1.05rem;
            color: #000;
            height: 3rem;
        }
        .recommend_btn p:nth-child(2){
            border: 1px solid #FF9D3C;
            color: #FF9D3C;
            margin-left: 1.05rem;
            height: calc(3.5rem - 2px) ;
            line-height:calc(3.5rem - 2px)  ;
        }
        .swiper-pagination-bullets{
            left: 120px !important;
        }
        .swiper-pagination-bullet-active{
            background: #FFDA43 !important;
        }
        .swiper-pagination-bullet{
            width: 5px !important;
            height: 5px !important;
        }
        .all_btn{
            position: absolute;
            bottom: 0;
            right: 0;
            height: 3rem;
            padding: 0 1.5rem;
            border-radius: 10rem;
            background: #ffda43;
            line-height: 3rem;
            font-weight: bold;
            color: #444444;
            /*box-shadow: 0 2px 5px 0 #F8CAA7;*/
        }
        .hot p{
            width: 13rem;
        }
        .hot{
            width: auto!important;
            margin-right: 2rem!important;
        }
        #merchant{
            height: 6rem;
            position: fixed;
            top: 0;
            width: 100%;
            background: #fff;
            z-index: 10;
        }
        .index_r{
            float: right;
            height: 2.8rem;
            background: #ffda43;
            line-height: 3rem;
            text-align: center;
            border-radius: 1.4rem;
            font-size: 1.2rem;
            color: #101010;
            margin-right: 1.5rem;
            margin-top: 1.5rem;
            padding: 0 1.5rem;
        }
        .index_l{
            float: left;
            height: 100%;
        }
        .index_l img{
            height: 3.8rem;
            width: 3.8rem;
            border-radius: 50%;
            float: left;
            margin-left: 1.5rem;
            margin-top: 1rem;
            margin-right: 1rem;
        }
        .index_l>div{
            float: left;
        }
        .index_l>div p:nth-child(1){
            font-size: 1.4rem;
            color: #000;
            margin-top: 1.1rem;
            margin-bottom: 0!important;
        }
        .index_l>div p:nth-child(2){
            color: red;
            font-size: 1.2rem;
        }

    </style>
    <style type="text/css">
        .search-container {
            position: fixed;
            background: #FFFFFF;
            top: 6rem;
            left: 0;
            width: 100%;
            z-index: 10;
            height: 4.4rem;
        }

        .search-view {
            height: 3.5rem;
            width: calc(100% - 3rem);
            top: 1rem;
            /* left: 4%; */
            padding: 0 1.5rem;
            border-radius: 0.6rem;
            margin: 0 auto;
            background: #eee;
        }

        .search-container .search-input {
            height: 3.5rem;
            line-height: 3.5rem;
            padding-left: 1.5rem;
            font-size: 1.4rem;
            color: #999;
        }

        .search-container .search-icon {
            background: url(../img/ic_search.png) no-repeat center center;
            background-size: 100% 100%;
            width: 2.2rem;
            height: 2.2rem;
            top: .7rem;
            position: absolute;
            left: 2rem;
            overflow: hidden;
        }
    </style>
</head>

<body style="display: none;">
	<div id="merchant">
        <div class="index_l">
            <img src="img/midu-logo.jpg" alt="">
            <div>
                <p class="user_img"></p>
                <p class="user_img_1"></p>
            </div>
        </div>
        <div class="index_r">
             预览首页
        </div>
    </div>
<div id="main" class="flex-con" style="padding-bottom: 4.16rem;overflow: hidden;">
    <div class="search-container">
        <div class="search-view">
            <span class="search-icon"></span>
            <p class="search-input">搜作者或书名</p>
        </div>
    </div>

    <div id="tabs" style="padding: 0 .8rem; height: 5rem;align-items: center;justify-content: space-around;font-size: 1.8rem;display: flex;background: #FFFFFF;position: fixed;top:9.8rem;width: 100%; color: #999; z-index: 99; box-shadow: 0 0.3rem 0.2rem 0rem #F6F6F6;">
        <div id="tab_0" class="active" style="position: relative;width: 16.6%;text-align: center;height: 100%;line-height: 5rem; color: #333;font-weight: bold;">推荐</div>
        <div id="tab_1" style="position: relative;width: 16.6%;text-align: center;height: 100%;line-height: 5rem;">职场</div>
        <div id="tab_2" style="position: relative;width: 16.6%;text-align: center;height: 100%;line-height: 5rem;">心理</div>
        <div id="tab_3"  style="position: relative;width: 16.6%;text-align: center;height: 100%;line-height: 5rem;">生活</div>
        <div id="tab_4" style="position: relative;width: 16.6%;text-align: center;height: 100%;line-height: 5rem;">小说</div>
        <div id="tab_5" style="position: relative;width: 16.6%;text-align: center;height: 100%;line-height: 5rem;">文化</div>
    </div>

    <div class="recommend">
        <!--好友助力-->
        <div class="col-xs-12" id="presenter_box"></div>
        <!--轮播图-->
        <div class="swiper-container" id="slideBox"></div>
        <div></div>
        <!--优惠券-->
        <div id="coupon_html">
        </div>
        <!--每日听书-->

        <!--蜜读小课-->
        <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
            <div align="center" class="col-xs-12"style="margin-bottom: 2.5rem;">
                <p style="left:0;right:0;margin:3rem 0 2rem 0;font-weight: bolder;font-size: 2.0rem;color: #534f4b; ">蜜读小课</p>
                <p class="lookAll_smallCourse" align="right" style="font-size: 1.2rem;color: #999999; margin: -4.2rem 1rem 0 0;">查看全部</p>
                <img align="right" src="../icon/more.png" style="margin: -1.8rem -1rem 0 0; width: 2rem; height: 2rem;"/>
            </div>
        </div>
        <div id="smallCourse_html">
        </div>

        <!--精品课-->
        <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
            <div align="center" class="col-xs-12" style="margin-bottom: 1.5rem;">
                <p style="left:0;right:0;margin:3rem 0 0 0;font-weight: bolder;font-size: 2.0rem;color: #534f4b; ">精品课</p>
                <p align="right" class="lookAll_course" style="font-size: 1.2rem;color: #999999; margin: -2.2rem 1rem 0 0;">查看全部</p>
                <img align="right" src="icon/more.png" style="margin: -1.8rem -1rem 0 0; width: 2rem; height: 2rem;"/>
            </div>
        </div>
        <div class="swiper-container1" id="course_html">
        </div>
        <!--必听书单-->
        <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
            <div align="center" class="col-xs-12"style="margin-bottom: 2.5rem;">
                <p style="left:0;right:0;margin:3rem 0 2rem 0;font-weight: bolder;font-size: 2.0rem;color: #534f4b; ">必听书单</p>
                <p class="lookAll_list" align="right" style="font-size: 1.2rem;color: #999999; margin: -4.2rem 1rem 0 0;">查看全部</p>
                <img align="right" src="icon/more.png" style="margin: -1.8rem -1rem 0 0; width: 2rem; height: 2rem;"/>
            </div>
        </div>
        <div id="list_html">
        </div>
        <!--热听好书-->
        <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
            <div align="center" class="col-xs-12" style="margin-bottom: 1rem;">
                <p style="left:0;right:0;margin:3rem 0 0 0;font-weight: bolder;font-size: 2.0rem;color: #534f4b; ">热听好书</p>
                <p align="right" class="lookAll_hot" style="font-size: 1.2rem;color: #999999; margin: -2.2rem 1rem 0 0;">查看全部</p>
                <img align="right" src="icon/more.png" style="margin: -1.8rem -1rem 0 0; width: 2rem; height: 2rem;"/>
            </div>
        </div>
        <div class="swiper-container2" id="hot_html">
        </div>
        <!--全部听书-->
        <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
            <div align="center" class="col-xs-12"style="margin-bottom: 3rem;">
                <p style="left:0;right:0;margin:3rem 0 0 0;font-weight: bolder;font-size: 2.0rem;color: #534f4b; ">全部听书</p>
            </div>
        </div>
        <div id="book_html"></div>
    </div>

    <div class="category hide">
        <div class="top-tag-container"><ul id="TopCategory"></ul></div>
        <script type="text/html" id="TopCategory_Item">
            {{each cateArr}}
            <li>
                <p class="category_btn" id={{"cate_" + $index}} style=" border-radius: 1.8rem; width: 6.5rem;height: 3.6rem; color: #333;text-align: center;font-size: 1.3rem;line-height: 3.6rem;">{{$value.name}}</p>
            </li>
            {{/each}}
        </script>
        <div id="book_html1"></div>
    </div>
</div>

<div id="footer" class="border-t" style="position: fixed;bottom: 0;left: 0;z-index: 99;width: 100%;height: 4.9rem;">
    <ul class="flex-wrap" style="height: 4.9rem;">
        <li tapmode="hover" class="flex-con active" style="height: 4.9rem;background-size: 2rem 2rem;line-height: 7.8rem; font-size: 1.3rem;">首页展示</li>
        <li id="center" tapmode="hover" class="flex-con" style="height: 4.9rem;background-size: 2rem 2rem;line-height: 7.8rem; font-size: 1.3rem;">分销管理</li>
    </ul>
</div>
<script type="text/html" id="banner_template">
    <div class="swiper-wrapper">
        {{each data.bannerList}}
        <div class="swiper-slide bannerlist" data-bannertype="{{$value.bannertype}}" data-videoauthorid="{{$value.videoauthorid}}" data-copywriter="{{$value.copywriter}}" data-bookid="{{$value.id}}">
            <img src="{{$value.img | addUrl}}" style="width: 100%;height: 12rem;" />
        </div>
        {{/each}}
    </div>
    <div class="swiper-pagination"></div>
</script>

<!--好友助力-->
<script type="text/html" id="presenter_template">
    {{each presenter}}
    <div class="presenter" style="">
        <img class="presenter_icon" src="img/jinri_icon.png" alt="">
        <img class="presenter_img" src="{{ $value.bookimg | addUrl}}" alt="">
    </div>
    <div class="recommend_btn">
        {{if userVip.type==1|| $value.isorder==1}}
        <p class="voiceBook_btn" data-bookid="{{$value.bookid}}" data-videoauthorid="{{$value.videoauthorid}}" data-copywriter="{{$value.copywriter}}" data-bookname="{{$value.bookname}}" data-bookimg="{{$value.bookimg}}">开始听书</p>
        {{else}}
        <p class="payment_click" data-bookid="{{$value.bookid}}" data-videoauthorid="{{$value.videoauthorid}}" data-copywriter="{{$value.copywriter}}" data-bookname="{{$value.bookname}}" data-bookimg="{{$value.bookimg}}">购买￥{{$value.bookprice}}</p>
        {{/if}}
    </div>

    <div class="bookrecommend">
        推荐语：{{$value.bookrecommend}}
    </div>
    {{/each}}
    </div>
</script>




<!--优惠券-->
<script id="coupon_template" type="text/html">
    {{each data}}
    <div class="coupon">
        <img src="../img/coupon_bgimg.png"/ style="width: 100%;height: 11rem;">
        <div class="coupon_price">
        </div>
    </div>
    {{/each}}
</script>
<!--蜜读小课-->
<script id="smallCourse_template" type="text/html">
    {{each listArr}}
    <div class="col-xs-12 smallCourse" style="min-height: 10.4rem;height:auto;width:100%;padding:0.572rem 1.456rem 0.572rem 1.456rem;margin-bottom: 1rem;" data-bookid={{$value.bookid}} data-videoauthorid={{$value.videoauthorid}} data-copywriter={{$value.copywriter}} >
        <div class="col-xs-4" style="height:10rem;width: 29.999%;padding:0rem;">
            <a href="javascript:;" style="text-decoration: none;">
                <img src="{{$value.bookimg | addUrl}}" style="width:10rem;height:100%;border-radius: 5%/5%">
            </a>
        </div>
        <div class="col-xs-8" style="position: relative;height:10rem;width:68.666666%;top:0rem;left:0.52rem;padding: 0.2rem 0.572rem 0.5rem 0rem;">
            <span class="aui-ellipsis-2 " style="position: relative;left:0rem;margin: 0;font-size: 1.66rem;line-height:2rem;font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow:ellipsis ;">{{$value.bookname}}</span>
            <p class="aui-ellipsis-2" style="position: relative;font-size:1.4rem;color: #666;margin-top: 0.6rem;">{{$value.bookrecommend}}</p>
            <div style="position:absolute;bottom: 0;">
                {{if $value.isorder == 1 || userVip.type == 1}}
                <p style="float:left;color: #feb255;font-size: 1.3rem;line-height: 1.3rem;margin-top: .5rem;">已购买</p>
                {{else}}
                <p style="float:left;color: #999;font-size: 1.3rem;line-height: 1.3rem;margin-top: .5rem;">{{$value.bookprice}}元/共{{$value.chaptercount}}节</p>
                {{/if}}
            </div>
        </div>
    </div>
    {{/each}}
</script>

<!--必听书单-->
<script id="list_template" type="text/html">
    {{each listArr}}
    {{if $index > 0}}
    <div onclick="goTOListDetail({{$value.themeid}})" class="col-xs-12" style="min-height: 10.4rem;height:auto;width:100%;padding:0.572rem 1.456rem 0.572rem 1.456rem;margin-bottom: 1rem;">
        <div class="col-xs-4" style="height:10rem;width: 29.999%;padding:0rem;">
            <a href="javascript:;" style="text-decoration: none;">
                <img src="{{$value.img | addUrl}}" style="width:10rem;height:100%;border-radius: 5%/5%">
            </a>
        </div>
        <div class="col-xs-8" style="position: relative;height:10rem;width:68.666666%;top:0rem;left:0.52rem;padding: 0.2rem 0.572rem 0.5rem 0rem;">
            <span class="aui-ellipsis-2 " style="position: relative;left:0rem;margin: 0;font-size: 1.66rem;line-height:2rem;font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow:ellipsis ;">{{$value.title}}</span>
            <p class="aui-ellipsis-2" style="position: relative;font-size:1.4rem;color: #666;margin-top: 0.6rem;">{{$value.contentabstract}}</p>
            <div style="position:absolute;bottom: 0;">
                <span style="float:left;color: #999;font-size: 1.3rem;line-height: 1.3rem;margin-top: .5rem;border-right:1px solid #999;padding-right: .088rem;">{{$value.bookCount}}本书</span>
                <span style="float:left;color: #999;font-size: 1.3rem;line-height: 1.3rem;margin-top: .5rem;padding-left: .46rem;">{{$value.clickCount | totalReadCount}}人在听</span>
            </div>
        </div>
    </div>
    {{/if}}
    {{/each}}
</script>

<!--精品课-->
    <script type="text/html" id="course_template">
        <div class="swiper-wrapper">
            {{each courseArr}}
            <div class="swiper-slide" onclick="goTOThemeDetail({{$value.themeid}})">
                <div class="course_bigView" style="margin: 1.5rem 0 1.5rem 1.5rem; width: 27.2rem; height: 19.5rem;background-color: white;box-shadow: 0 0 0.52rem 0.52rem #eff0f5;border-radius: 0.5rem;">
                    <img src="{{$value.bigimg | addUrl}}" style="width: 100%;height: 12rem;" />
                    <p style="padding-left: 1.0rem;margin-top: 1.5rem;margin-bottom: 0; color: #333333;font-size: 1.66rem;font-weight: bold; overflow: hidden;white-space: nowrap;text-overflow:ellipsis ;">{{$value.title}}</p>
                    <p style="padding-left: 1.0rem;margin-top: .6rem;margin-bottom: 0;color: #999999;font-size: 1.2rem;">{{$value.bookCount + "节课 | " + $value.clickCount + "人在学"}} </p>
                    {{if userVip.type==1}}
                    <p align="right" style="padding-right: 1.0rem;margin-top: -1.8rem;color: #999999;font-size: 1.2rem;"><s>{{"¥ " + $value.price}}</s><span style="color: #FF9D3C;font-size: 1.4rem;font-weight: bold;"> VIP ¥0</span></p>
                    {{else if $value.isorder==1}}
                    <p align="right" style="padding-right: 1.0rem;margin-top: -1.8rem;color: #FF9D3C;font-size: 1.4rem;">已购买</p>
                    {{else}}
                    <p align="right" style="padding-right: 1.0rem;margin-top: -1.8rem;color: #999999;font-size: 1.2rem;"><s>{{"¥ " + $value.originalPrice}}</s><span style="color: #FF9D3C;font-size: 1.4rem;font-weight: bold;">{{" ¥ " + $value.price}}</span></p>
                    {{/if}}
                </div>
            </div>
            {{/each}}
        </div>
        <div class="swiper-pagination"></div>
    </script>

<!--热听好书-->
<script type="text/html" id="hot_template">
    <div class="swiper-wrapper" style="padding-left: 1.5rem; ">
        {{each hotArr}}
        <div class="swiper-slide hot" data-bookid={{$value.bookid}} data-videoauthorid={{$value.videoauthorid}} data-copywriter={{$value.copywriter}} data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}}>
            <img src="{{$value.bookimg | addUrl}}" style="margin: 2.5rem 0 0 0rem; width: 13rem; border-radius: 4px; box-shadow: 3px 3px 3px #e6e6e6;" />
            <p style="margin-top: 1.7rem; margin-bottom: 0; color: #333333;font-size: 1.66rem; font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow:ellipsis ;">{{$value.bookname}}</p>
            <p style="margin-top: .3rem;  margin-bottom: 0; color: #999999;font-size: 1.2rem;">{{$value.videoduration}} </p>
            {{if userVip.type==1}}
            <p style="margin-top: 0.6rem;color: #FF9D3C;font-size: 1.4rem;font-weight: bold;">VIP ¥0 <span style="color: #999999;font-size: 1.2rem;"><s>{{"¥ " + $value.bookprice}}</s></span></p>
            {{else if $value.isorder==1}}
            <p style="margin-top: 0.6rem;color: #FF9D3C;font-size: 1.4rem;font-weight: bold;">已购买</p>
            {{else}}
            <p style="color: #FF9D3C;font-size: 1.4rem;font-weight: bold;">{{"¥ " + $value.bookprice}}</p>
            {{/if}}
        </div>
        {{/each}}
    </div>
</script>

<!--全部听书-->
<script id="book_template" type="text/html">
    {{each bookArr}}
    <div class="col-xs-12 bookdetail" style="min-height:12rem;height:auto;width:100%;padding-left: 1.456rem;padding-right: 1.456rem;" data-bookid={{$value.bookid}} data-videoauthorid={{$value.videoauthorid}} data-copywriter={{$value.copywriter}} data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}}>
        <div class="col-xs-4" style="height:12rem;width: 29.3333%;padding:0rem;">
            <a href="javascript:;" style="text-decoration: none;">
                <img src="{{$value.bookimg | addUrl}}" style="width: 9.17rem;height: 12rem;box-shadow: 3px 3px 3px #e6e6e6; border-radius: 4px">
                <img src="icon/listen.png" style="width: 1.66rem; height: 1.66rem; margin-top: -1.82rem; margin-left: 7.28rem;"/>
            </a>
        </div>
        <div class="col-xs-8" style="position: relative;height:12rem;width:68.666666%;top:0rem;left:0.52rem;padding: 0.2rem 0.572rem 0.5rem 0rem;">
            <span class="aui-ellipsis-2 " style="position: relative;left:0rem;margin: 0;font-size: 1.66rem;line-height:2rem;font-weight: bold;">{{$value.bookname}}</span>
            <p class="aui-ellipsis-2" style="position: relative;font-size:1.4rem;color: #666;margin-top: 0.78rem;margin-bottom: 0;">{{$value.bookrecommend}}</p>
            {{if progessArr}}
            {{if progessArr[$index] == 0}}
            <div style="position:absolute;bottom: 0.1rem;">
                <span style="float:left; height: 3rem;line-height: 3rem ;color: #999;font-size: 1.2rem;margin-top: .5rem;padding-right: .46rem;">{{$value.videoduration}}</span>
            </div>
            {{else}}
            <div style="position:absolute;bottom: 0.1rem;">
                <span style="float:left;color: #999;font-size: 1.2rem;line-height: 1.3rem;margin-top: .5rem;padding-right: .46rem;">{{$value.videoduration + " " + progessArr[$index]}}</span>
            </div>
            {{/if}}
            {{else}}
            <div style="position:absolute;bottom: 0.1rem;">
                <span style="float:left;color: #999;font-size: 1.2rem;line-height: 1.3rem;margin-top: .5rem;padding-right: .46rem;">{{$value.videoduration}}</span>
            </div>
            {{/if}}
            {{if (userVip.type==1||$value.isorder==1)}}
            <div class="begin-read" data-isactivity={{$value.book_activity}} data-isorder={{$value.isorder}} data-bookid={{$value.bookid}} style="position: absolute;right: 1.4rem;bottom: 0;width: 7.8rem;height:3rem;background:#ffda43;border-radius: 10rem;text-align: center;color: #333333;font-size: 1.4rem; padding-top: 0.3rem;line-height: 2.95rem;font-weight: bold;">
                开始听书
            </div>
            {{else}}
            <div style="position: absolute;right: 1.5rem;height: 3rem;line-height: 3rem ;bottom: 0.2rem;font-size: 1.4rem; font-weight: bold; text-align: center;color: #FF9D3C;">
                {{"¥ " + $value.bookprice}}
            </div>
            <!--<div class="all_btn" data-bookid="{{$value.bookid}}" data-videoauthorid="{{$value.videoauthorid}}" data-copywriter="{{$value.copywriter}}" data-bookname="{{$value.bookname}}" data-bookimg="{{$value.bookimg}}">分享免费</div>-->
            {{/if}}
        </div>
    </div>
    <div class="col-xs-12" style="height: 2rem;width: 100%;"></div>
    {{if $index == (bookArr.length - 1)}}
    <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <div align="center" class="col-xs-12" style="margin-bottom: 1rem;">
            {{if isFinish == 0}}
            <p class="click_lookMore" style="margin:1.5rem 32%; height: 3.5rem; font-weight: bold; font-size: 1.3rem;color: #333333; background: #EEEEEE; padding-top: 0.8rem; border-radius: 1.75rem;">加载更多听书</p>
            {{else}}
            <p style="margin:1.5rem 0; font-size: 1.3rem;color: #CCCCCC;">已显示全部听书</p>
            {{/if}}
        </div>
    </div>
    {{/if}}
    {{/each}}
</script>
<!--赠一得一弹窗-->
<div class="activity-alertView hide">
    <div class="follow-mask"></div>
    <div class="activity_bookView hide" align="center">
        <div class="activity-list" align="center">
            <p style="font-size: 1.66rem; width: 100%; left: 0; text-align: center; font-weight: bold; color: #333333;">分享免费领</p>
            <p class="stageNum" style="font-size: 1.3rem; width: 100%; left: 0; text-align: center; color: #666666;margin-top: 0.5rem;"></p>
            <ul id="activity_book" style="margin-top: 1.2rem;"></ul>
            <div class="free_receive_btn" style="background-color: #FF9D3C; left: 0; margin-top: 3rem; margin-bottom: 1.82rem; margin-right: 2rem; height: 4rem; color: white; font-size: 1.4rem; text-align: center; border-radius: 0.3rem; padding-top: 1rem; ">免费领取</div>
        </div>
        <script type="text/html" id="activity_Item">
            {{each data.book_list}}
            <li>
                <div class="activity_Item_div">
                    <img class="activity_bookimg" src="{{$value.bookimg | addUrl}}" style="width: 8.3rem; height: 10.3rem; box-shadow: 3px 3px 3px #e6e6e6;border: 0;vertical-align: middle;"/>
                    <img src="icon/listen.png" style="width: 1.66rem; height: 1.66rem; margin-left: 5.2rem; margin-top: -2.08rem;"/>
                    <p style="font-size: 1.3rem;overflow: hidden;white-space: nowrap; text-overflow: ellipsis; width: 9.17rem; color: #333333; margin-top: 1.3rem;">{{$value.bookname}}</p>
                </div>
            </li>
            {{/each}}
        </script>
    </div>
    <img class="closeBtn" src="img/close_img.png" style="position: absolute; width: 4rem; height: 4rem; top: 3rem;right: 1rem;z-index: 125;"/>
</div>
<!--广告弹窗-->
<img id="activity_Advertisement_id" class="activity_Advertisement hide" src="" style="z-index: 120; position: fixed; left: 0; width: 100%; top: 0;height: 100%;"/>
<!--新手礼包弹窗-->
<img class="activity_newUserImgView hide" src="img/newUserImage.png" style="z-index: 120; position: fixed; left: 0; width: 100%; top: 0;height: 100%;"/>
<div class="newUser_activity hide">
    <div class="follow-mask"></div>
    <div class="newUser_activity_bookView" align="center">
        <p align="center" style="font-size: 2.0rem; color: #333333; font-weight: bold;margin-top: 0rem;">新用户专享</p>
        <p align="center" style="font-size: 1.3rem; color: #666666;margin-top: -1.0rem;margin-bottom: 2.5rem;">连续七天，每天送你一本好书</p>
        <div class="swiper-container3" id="new_html"></div>
    </div>
    <img class="closeBtn" src="img/close_img.png" style="position: absolute; width: 4rem; height: 4rem; top: 8rem;right: 2rem;z-index: 125;"/>
    <script type="text/html" id="newUser_template">
        <div class="swiper-wrapper">
            {{each data}}
            <div class="swiper-slide" style="left: 0; width: 100%; height: 25.5rem;">
                <img src="{{$value.bookimg | addUrl}}" style="width: 10rem;height: 13.2rem;" />
                <p align="center" style="font-size: 1.5rem; color: #333333; margin-top: 0.5rem;">{{$value.bookname}}</p>
                {{if $value.isorder == 1 || userVip.type == 2}}
                <div class="newUser_receiveBtn" style="left: 15%; width: 70%; height: 4.5rem; background-color: #f8d44c; color: #333333; line-height: 4.5rem; font-size: 1.5rem; border-radius: 2.25rem; margin-top: 4.0rem;">开始听书</div>
                {{else if $index == localDay - 1}}
                <div class="newUser_receiveBtn" style="left: 15%; width: 70%; height: 4.5rem; background-color: #f8d44c; color: #333333; line-height: 4.5rem; font-size: 1.5rem; border-radius: 2.25rem; margin-top: 4.0rem;">今日免费</div>
                {{else if $index < localDay - 1}}
                <div style="left: 15%; width: 70%; height: 4.5rem; background-color: #EEEEEE; color: #999999; line-height: 4.5rem; font-size: 1.5rem; border-radius: 2.25rem; margin-top: 4.0rem;">未领取</div>
                {{else}}
                <div style="left: 15%; width: 70%; height: 4.5rem; background-color: #EEEEEE; color: #999999; line-height: 4.5rem; font-size: 1.5rem; border-radius: 2.25rem; margin-top: 4.0rem;">待领取</div>
                {{/if}}
            </div>
            {{/each}}
        </div>
        <div class="swiper-pagination" style="padding-bottom: 9rem;"></div>
        <p align="center" style="font-size: 1.2rem; color: #999999;">领取成功后在「书架」查看</p>
    </script>
</div>
<!--若提示框-->
<div id="warn"></div>
<img class="showNewUser hide" src="img/newUser_icon.png" style="width: 7.5rem; height: 7.5rem; bottom: 8.2rem; right: 0; position: fixed; z-index: 80;"/>
</body>
</html>

<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/purl.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    var toast = new auiToast();
    var todayArr1 = new Array();//每日听书——主编推荐
    var courseArr = new Array();//精品课
    var listArr = new Array();//必听书单
    var hotArr = new Array();//热听好书
    var bookArr = new Array();//全部听书
    var smallCourseArr = new Array();//蜜读小课
    var page = 1;
    var userInfo;


    template.defaults.imports.addFaceUrl = function(value) {
        if(value == "" || value == null) {
            return "img/book.png"
        } else {
            if(checkURL(value)) {
                return value;
            } else {
                return imgFaceurl + value
            }
        }
    };


        $('body').show();

        if (localStorage.getItem("refresh")) {
            localStorage.removeItem("refresh");
        }else {
            toast.loading({
                title: "加载中",
                duration: 2000
            });
        }

        function home() {
            var sign = hex_md5(objKeySort({token:token,timestamp:date,merchantId:merchantId}))
            userInfo=JSON.parse(sessionStorage.getItem('weixinData')).data;
            $.ajax({
                type: "get",
                url: hostUrl + 'home/index/'+ token +'/'+ sign +'/' + date + '/' + merchantId,
                async: true,
                success: function(data) {
                    todayArr1 = data.data.bookList;
                    hotArr = data.data.bookList2;
                    courseArr = data.data.themeList2;
                    listArr = data.data.themeList;
                    smallCourseArr = data.data.bookList3;
                    shareWx("我在蜜读开了一个知识听书馆，邀请你一起加入", shareUrl + "img/fx_home.jpg", "以书会友，听书变现，海量好书无限畅听。");
                    data.userVip=userVip;

//					轮播图
                    var banner_html = template("banner_template", data);
                    document.getElementById('slideBox').innerHTML = banner_html;
                    var mySwiper = new Swiper('.swiper-container', {
                        direction: 'horizontal',
                        loop: true,
                        autoplay: "3000",
                        slidesPerView: 1,
                        // 如果需要分页器
                        pagination: '.swiper-pagination',
                    })
//					每日听书
//					主编推荐
//					音频进度
                    if (window.localStorage) {
                        var progess;
                        var bookid;
                        var bookCount;
                        var progessStr;
                        var progessArr = new Array();
                        for (var i = 0; i < todayArr1.length; i ++) {
                            bookid = todayArr1[i]["bookid"];
                            bookCount = localStorage.getItem(bookid + "_count");
                            bookCount = parseInt(bookCount);
                            progess = 0;
                            if (bookCount) {
                                for (var j = 0; j < bookCount; j ++) {
                                    var value = localStorage.getItem(bookid + "_" + j);
                                    if (value) {
                                        var timeArr = value.split("_");
                                        if (timeArr.length == 2) {
                                            currentTime = parseInt(timeArr[0]);
                                            duration = parseInt(timeArr[1]);
                                            progess += parseInt((currentTime * 100) / duration);
                                        }
                                    }
                                    if (j == bookCount - 1) {
                                        if (progess == 0 || !progess) {
                                            progessStr = "0";
                                        }else {
                                            if (parseInt(progess / bookCount) >= 100) {
                                                progessStr = "已听完";
                                            } else{
                                                progessStr = "已听" + parseInt(progess / bookCount) + "%";
                                            }
                                        }
                                    }
                                }
                            } else{
                                progessStr = "0";
                            }
                            progessArr.push(progessStr);
                        }
                    }
                    data.progessArr = progessArr;
                    // 好友助力
                  data.presenter = todayArr1;
                    var pres = template("presenter_template",data);
                    document.getElementById('presenter_box').innerHTML = pres


                    //精品课
                    data.courseArr = courseArr;
                    var course_html = template("course_template", data);
                    document.getElementById('course_html').innerHTML = course_html;
                    var mySwiper = new Swiper('.swiper-container1', {
                        direction: 'horizontal',
                        loop: false,
                        slidesPerView: 1.24,
                    })

//					必听书单
                    data.listArr = listArr;
                    var list_html = template("list_template", data);
                    document.getElementById('list_html').innerHTML = list_html;

//					蜜读小课
                    data.listArr = smallCourseArr;
                    var smallCourse_html = template("smallCourse_template", data);
                    document.getElementById('smallCourse_html').innerHTML = smallCourse_html;

//					热听好书
                    data.hotArr = hotArr;
                    var hot_html = template("hot_template", data);
                    document.getElementById('hot_html').innerHTML = hot_html;
                    var mySwiper = new Swiper('.swiper-container2', {
                        direction: 'horizontal',
                        loop: false,
                        slidesPerView: 'auto',
                    })

                    toast.hide();
            if(!GetQueryString('my')){
                location.href='my.html'
            }

                    //查询用户是否关注或订阅
                    var signs = hex_md5(objKeySort({token: token, timestamp: date}))//查询用户是否关注或订阅签名
                    $.ajax({
                        type:"get",
                        url: hostUrl + 'merchant/subscribe/info',  //查询用户是否订阅
                        data:{
                            authorizerAppid:localStorage.getItem('Cappid') =='undefined' ? appId : localStorage.getItem('Cappid'),
                            token: token,
                            timestamp: date,
                            sign:signs
                        },
                        async:false,
                        success:function(data) {
                            $('.user_img_1').text(data.data.count + '人关注');

                        }
                    });


                }
            });




            }

        getToken(home);

    getBookListDown()
     function getBookListDown(){ //下拉刷新
            var sign = hex_md5(objKeySort({token:token,timestamp:date,type:0,page:page,rows:10,merchantId:merchantId}))
            $.ajax({
                type:"get",
                url:hostUrl + '/product/book/list/'+ token +'/'+ sign +'/'+ date + '/' + merchantId + '/0/1/'+ page +'/10',
                async:true,
                success:function(data){
                    if (data.status != 0) {
                        return;
                    }
                    if (data.data.book_list.length < 10) {
                        data.isFinish = 1;
                    }else {
                        data.isFinish = 0;
                    }
                    data.userVip=userVip;
                    for (var i = 0; i < data.data.book_list.length; i ++) {
                        bookArr.push(data.data.book_list[i]);
                    }
                    page = parseInt((bookArr.length + 9) / 10);
                    if (window.localStorage) {
                        var progess;
                        var bookid;
                        var bookCount;
                        var progessStr;
                        var progessArr = new Array();
                        for (var i = 0; i < bookArr.length; i ++) {
                            bookid = bookArr[i]["bookid"];
                            bookCount = localStorage.getItem(bookid + "_count");
                            bookCount = parseInt(bookCount);
                            progess = 0;
                            if (bookCount) {
                                for (var j = 0; j < bookCount; j ++) {
                                    var value = localStorage.getItem(bookid + "_" + j);
                                    if (value) {
                                        var timeArr = value.split("_");
                                        if (timeArr.length == 2) {
                                            currentTime = parseInt(timeArr[0]);
                                            duration = parseInt(timeArr[1]);
                                            progess += parseInt((currentTime * 100) / duration);
                                        }
                                    }
                                    if (j == bookCount - 1) {
                                        if (progess == 0 || !progess) {
                                            progessStr = "0";
                                        }else {
                                            if (parseInt(progess / bookCount) >= 100) {
                                                progessStr = "已听完";
                                            } else{
                                                progessStr = "已听" + parseInt(progess / bookCount) + "%";
                                            }
                                        }
                                    }
                                }
                            } else{
                                progessStr = "0";
                            }
                            progessArr.push(progessStr);
                        }
                    }
                    data.progessArr = progessArr;
                    data.bookArr = bookArr;
                    var book_html = template("book_template", data);
                    document.getElementById('book_html').innerHTML = book_html;
                }
            });
        }
      var data = JSON.parse(sessionStorage.getItem('weixinData'))

    myMsg()
    function myMsg() {
        var signs = hex_md5(objKeySort({token: token, timestamp: date}))
        $.ajax({
            type:"get",
            url:hostUrl + 'merchant/update/info/get',
            data:{
                token: token,
                timestamp: date,
                sign:signs,
            },
            async:true,
            success:function(data) {
                $('.index_l img').attr('src',data.data.headImgUrl)
                $('.user_img').text(data.data.nickname)
            }
        });
    }

    //跳转用户C端
    $('.index_r').click(function () {
            location.href="index.html?merchantId=" + openId + '&appid='+ authappid
            // location.href="h5pay.html?merchantId=" + openId + '&appid='+ authappid
    })
    //底部跳转我的页面
    $("#center").click(function() {
        location.href = "my.html";
    })


    var isPageHide = false;
    window.addEventListener('pageshow', function () {
        if (isPageHide) {
            location.reload()
        }
    });
    window.addEventListener('pagehide', function () {
        isPageHide = true;
    });

    function _preventDefault(e){
        e.preventDefault();
    }


    (function() {
        var mta = document.createElement("script");
        mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500653488");
        mta.setAttribute("cid", "500653489");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();

</script>